<template>
  <section class="text">
    <section class="title">{{ title }}</section>
    <section v-if="!!value" class="value-v">{{ `${value}亿元` }}</section>
    <section v-if="!!value1" class="value-v">{{ `${value1}万美元` }}</section>
    <section class="value">
      <span class="trend">{{ trend }}</span>
      <span class="percent">{{ `${percent}%` }}</span>
    </section>
  </section>
</template>
<script setup lang="ts">
defineProps<{
  title: string
  trend: string
  percent: number
  value?: string
  value1?: string
}>()
</script>
<style scoped>
.text {
  font-family: 'Microsoft YaHei , Microsoft YaHei-400';
  margin-top: 18%;
}

.title {
  color: #f2da62;
  font-size: 16px;
}

.value-v {
  color: #00daff;
  font-size: 18px;
  margin-top: 5%;
}

.value {
  color: #00daff;
  margin-top: 5%;
  .trend {
    font-size: 12px;
  }
  .percent {
    font-size: 18px;
  }
}
</style>
